<template>
  <div class="box">
    <div class="content">
      <!-- 头部 -->
      <div class="content_top">
        <div style="font-size: 14px;color: #8D8D8D;margin:10px 0 0 30px;">小区管理 / <span style="color: #5A5A5A;">编辑小区</span></div>
        <h3 style="margin-left: 30px;font-size: 20px;">编辑小区</h3>
      </div>
      <!-- 基础信息 -->
      <div class="content_middle">
        <p style="margin: 20px 0 0 40px;">基础信息</p>
        <el-form :model="villageForm" :rules="rules" ref="villageForm" label-width="100px" class="demo-villageForm">
          <el-form-item label="小区名称" prop="villageName">
            <el-input v-model="villageForm.villageName" style="width: 400px;" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="小区编号" prop="villageNumber">
            <el-input v-model="villageForm.villageNumber" style="width: 400px;" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="详细地址">
            <el-input v-model="villageForm.villageAddress" style="width: 400px;" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="建成日期">
            <el-date-picker
              style="width: 400px;"
              v-model="villageForm.completionTime"
              type="date"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="房屋用途">
            <el-select v-model="villageForm.purpose" style="width: 400px;" multiple placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="小区面积">
            <el-input-number v-model="villageForm.villageArea" style="width: 400px;" controls-position="right"  :min="1" :max="100000"></el-input-number>
            <span>&nbsp;&nbsp; 平方米</span>
          </el-form-item>
          <el-form-item label="楼栋数量">
            <el-input-number v-model="villageForm.floorNum" style="width: 400px;" controls-position="right" :min="1" :max="100"></el-input-number>
            <span>&nbsp;&nbsp; 栋</span>
          </el-form-item>
          <el-form-item label="房屋数量">
            <el-input-number v-model="villageForm.houseNum" style="width: 400px;" controls-position="right" :min="1" :max="100000"></el-input-number>
            <span>&nbsp;&nbsp; 间</span>
          </el-form-item>
          <el-form-item label="车位面积">
            <el-input-number v-model="villageForm.parkingLotArea" style="width: 400px;" controls-position="right"  :min="1" :max="10000"></el-input-number>
            <span>&nbsp;&nbsp; 平方米</span>
          </el-form-item>
          <el-form-item label="车位数量">
            <el-input-number v-model="villageForm.parkingLotNum" style="width: 400px;" controls-position="right" :min="1" :max="1000"></el-input-number>
            <span>&nbsp;&nbsp; 个</span>
          </el-form-item>
          <el-form-item label="小区图片">
            <el-upload
              class="upload_reilcimg"
              ref="uploadImg"
              action="https://jsonplaceholder.typicode.com/posts/"
              list-type="picture-card"
              :before-upload="beforeAvatarUpload"
              :on-remove="handleRemove"
              :on-change="changeUpload"
              :show-file-list="true"
              :limit="3"
              :file-list="villageForm.fileList"
              accept="image/png, image/jpeg, application/pdf"
              :multiple="true"
              :auto-upload="false"
            >
              <i class="el-icon-plus" />
            </el-upload>
            <p style="font-size: 12px; color: #ccc;">
              可上传jpg、jpeg、png、webg格式，不能超过10M，最多上次三张图片
            </p>
          </el-form-item>
          <el-form-item label="小区简介">
            <el-input type="textarea" style="width: 400px;" v-model="villageForm.villageBack"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <!-- 负责人信息 -->
      <div class="content_botton">
        <p style="margin: 20px 0 0 40px;">负责人信息</p>
        <el-form :model="staffsForm" :rules="rules" ref="ruleForm"  label-width="100px" class="demo-villageForm">
          <el-form-item label="姓名">
            <el-input v-model="staffsForm.staffName" style="width: 400px;" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="微信">
            <el-input v-model="staffsForm.vChat" style="width: 400px;" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="电话">
            <el-input v-model="staffsForm.staffPhone" style="width: 400px;" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="QQ">
            <el-input v-model="staffsForm.qChat" style="width: 400px;" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="staffsForm.email" style="width: 400px;" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            <el-button @click="backspace">返回</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SmartPropertyVueVillageAdd',

  data() {
    return {
      options: [{
        value: '普通住宅',
        label: '普通住宅'
      }, {
        value: '商业用地',
        label: '商业用地'
      }, {
        value: '商住两用',
        label: '商住两用'
      }, {
        value: '其他',
        label: '其他'
      }],
      villageForm: {
        id: '',
        villageName: '',
        villageNumber: '',
        villageAddress: '',
        completionTime: '',
        purpose: '',
        villageArea: '',
        fileList: [],
        floorNum: '',
        houseNum: '',
        parkingLotArea: '',
        parkingLotNum: '',
        villageBack: '',
        hId: JSON.parse(window.localStorage.getItem('user')).id
      },
      staffsForm: {
        staffName: JSON.parse(window.localStorage.getItem('user')).staffName,
        staffPhone: JSON.parse(window.localStorage.getItem('user')).staffPhone,
        vChat: JSON.parse(window.localStorage.getItem('user')).vchat,
        qChat: JSON.parse(window.localStorage.getItem('user')).qchat,
        email: JSON.parse(window.localStorage.getItem('user')).email
      },
      rules: {
        villageName: [
          { required: true, message: '请输入小区名称', trigger: 'blur' }
        ],
        villageNumber: [
          { required: true, validator: this.validateTitle, trigger: 'blur' }
        ]
      },
      imageUrl: '',
      imageFile: File,
      dialogVisible: false
    }
  },

  mounted() {
    this.villageForm = this.$route.query.villageForm
    this.villageForm.purpose = this.$route.query.villageForm.purpose.split(',')
    const urls = this.$route.query.villageForm.villageImage.split(',')
    this.villageForm.fileList = urls.map((element,index) => {
      return {
        id: index,
        url: element
      }
    })
  },

  methods: {
    validateTitle (rules, value, callback) { // 判断小区编号是否重复
      if (!value) {
        callback(new Error('请输入小区编号'))
      } else {
        this.$axios.get('/memberCjq/village/listVillageNumber', value).then(res => {
          if (res.data.obj.flag) {
            callback()
          } else {
            callback(new Error(res.data.obj.obj))
          }
        })
      }
    },
    submitForm(formName) { // 修改小区信息
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const formData = new FormData()
          const villageForm = this.villageForm
          const staffsForm = this.staffsForm
          for (const key in villageForm) {
            if (villageForm[key]) {
              formData.append(key, villageForm[key])
            }
          }
          if (this.villageForm.purpose !== '') {
            formData.set('purpose', this.villageForm.purpose.join(','))
          }
          for (const key in staffsForm) {
            if (staffsForm[key]) {
              formData.append(key, staffsForm[key])
            }
          }
          this.villageForm.fileList.forEach(value => {
            formData.append('file', value.raw)
          })
          console.log(formData.get('file'))
          this.$axios.post('/memberCjq/village/saveVillageInfo', formData).then(res => {
            if (res.data.flag){
              this.MyMessage('修改成功!', 'success')
              this.$router.push('/village')
              this.insertLog('小区信息编辑')
            } else {
              this.MyMessage('修改失败，请联系管理员', 'warning')
            }
          })
        } else {
          console.log('error submit!!')
          this.MyMessage('系统有误，请联系管理员!', 'error')
          return false
        }
      })
    },
    backspace (){
      this.$router.push('/village')
    },
    beforeAvatarUpload(file) { // 设置图片上传格式
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/webp' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 10
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG/WEBP/PNG 格式!')
        return false
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 10MB!')
        return false
      }
      this.imageFile = file
      this.imageUrl = URL.createObjectURL(file)
      return false
    },
    // 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
    changeUpload(file, fileList) {
      this.villageForm.fileList = fileList
    },
    // 删除图片
    handleRemove(file, fileList) {
      this.villageForm.fileList = fileList
    },
    MyMessage (msg, type) {
      this.$notify({
        showClose: true,
        message: msg,
        type: type
      })
    }
  }
}
</script>

<style scoped>
.box{
  width: 100%;
  height: 100%;
  font-family: '微软雅黑';
  background: #F0F2F5;
}
.content{
  width: 1200px;
  height: 1700px;
  margin: 0 auto;
  padding-top: 25px;
}
.content_top{
  width: 100%;
  height: 95px;
  line-height: 35px;
  overflow: hidden;
  background: #FFF;
}
.content_middle{
  width: 100%;
  height: 1050px;
  background: #FFF;
  overflow: hidden;
  margin-top: 20px;
}
.demo-villageForm{
  width: 610px;
  height: 100%;
  margin: 0 auto;
  margin-top: 40px;
}
.avatar-uploader .el-upload {
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  border: 1px dashed #d9d9d9;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.content_botton{
  width: 1200px;
  height: 470px;
  margin-top: 20px;
  overflow: hidden;
  background: #FFF;
}
::v-deep(.el-upload--picture-card){
  width: 120px;
  height: 120px;
}
::v-deep(.el-upload-list--picture-card .el-upload-list__item){
  width: 120px;
  height: 120px;
}
::v-deep(.el-icon-plus){
  position: relative;
  top:-7px;
}
</style>
